<template>
  <div>
    <el-form :model="regUser">
      <el-form-item label="邮箱号" label-width="80">
        <el-input v-model="regUser.uemail" placeholder="请输入邮箱" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" label-width="80">
        <el-input v-model="regUser.upassword" placeholder="请输入密码" autocomplete="off" show-password></el-input>
      </el-form-item>
      <div style="margin-top: 20px">
        <el-form-item label="验证码" label-width="80">
        <el-input
          placeholder="请输入验证码"
          v-model="regUser.verify"
          clearable
        ></el-input>
        </el-form-item>
        <div style="float: right">
          <el-button type="primary" v-show="isClick" @click="getVerify">获取验证码</el-button>
          <el-button type="primary" v-show="!isClick" @click="getVerify">{{ count }} s</el-button>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" style="width: 100%;margin-top: 20px;" @click="register">注  册</el-button>
    </div>

  </div>
</template>

<script>
import {getRegVerify, userRegister} from "@/api/login";

export default {
  name: "register",
  data() {
    return {
      regUser: {
        uemail: "",
        upassword: "",
        verify: ""
      },
      isClick: true, //显示获取验证码按钮
      count: "", //倒计时次数
      timer: null, //倒计时
    }
  },
  methods:{
    // 获取验证码
    async getVerify() {
      if (this.regUser.uemail === "" || this.regUser.uemail === null) {
        this.$message.error("请先填写邮箱号");
        return;
      }
      try {
        await getRegVerify({ email: this.regUser.uemail })
          .then((res) => {
            if (!res.data.success) {
              this.$message.error(res.data.msg);
            } else {
              this.$message({
                message: "发送验证码成功，请注意接收",
                type: "success",
              });
              const TIME_COUNT = 60;
              if (!this.timer) {
                this.count = TIME_COUNT;
                this.isClick = false;
                this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= TIME_COUNT) {
                    this.count--;
                  } else {
                    this.isClick = true;
                    clearInterval(this.timer); // 清除定时器
                    this.timer = null;
                  }
                }, 1000);
              }
            }
          });
      } catch (error) {
        console.log(error);
        this.$message.error(error);
      }
    },
    // 用户注册
    register(){
      if (this.regUser.uemail === '' || this.regUser.upassword === '' || this.regUser.verify === ''){
        this.$message.error("请将数据填写完整");
        return;
      }
      userRegister(this.regUser).then(res => {
        console.log(res.data)
        if (res.data.code === '8888'){
          setTimeout(() =>{
            this.$message({
              message: '注册成功',
              type: 'success'
            });
          }, 1000);
          window.location.reload()
        }else{
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
